import React, {Component, PropTypes} from 'react';
import DatePicker from '../../../components/DatePicker';
import TimePicker from '../../../components/TimePicker';
import LoadingComponent from '../../../components/LoadingComponent';
import {format} from '../../../utils/datetime';
import {saveCompanyThirdPayment} from '../actions/Charge';
import {RES_OK_CODE} from '../../../constants/AppConstant';
import {alert} from '../../../utils/popup';
import StickLayout from '../../../components/StickLayout';

import t from 'tcomb-form';

const Form = t.form.Form;
const schema = t.struct({
  paydate: t.String, 
  paytime: t.String, 
  count: t.String,
  account: t.String,
  nickname: t.String
});

const focus = (event) => {
  let fieldGroup = event.currentTarget.parentNode;
  fieldGroup.className += ' focus';
}

const blur = (event) => {
  let fieldGroup = event.currentTarget.parentNode;
  fieldGroup.className = fieldGroup.className.replace('focus', '');
}

const options = {
  fields: {
    paydate: {
      label: '支付日期',
      template: t.form.Form.templates.textbox.clone({
        renderInput(locals) {
          return <DatePicker value={locals.value} onChange={locals.onChange} />
        }
      }),
      attrs: {
        
      },
    },
    paytime: {
      label: '支付时间',
      template: t.form.Form.templates.textbox.clone({
        renderInput(locals) {
          return <TimePicker value={locals.value} onChange={locals.onChange} />
        }
      }),
      attrs: {
        
      },
    },
    count: {
      label: '支付金额',
      type: 'number',
      attrs: {
        placeholder: '最低金额100元',
      },
    },
    account: {
      label: '支付账号',
      attrs: {
        placeholder: '输入帐号',
      },
    },
    nickname: {
      label: '支付昵称',
      attrs: {
        placeholder: '输入昵称',
      },
    }
  }
};

class ThirdChargeForm extends Component {
  
  constructor(props) {
    super(props);
    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.onInputChange = this.onInputChange.bind(this);
    this.state = {
      value: {
        count: '',
        paydate: format(new Date(), 'Y-m-d'), 
        paytime: format(new Date(), 'HH') + ':' + format(new Date(), 'mm'), 
        account: '',
        nickname:''
      }
    };

    this.payNameLabels = {
      1: '微信',
      2: '支付宝',
      3: '财付通',
    };
  }

  componentWillReceiveProps(nextProps) {
    //
  }

  onFormSubmit() {
    const {dispatch ,charge, match, history} = this.props;
    let thirdPayments = charge.get('companyQuickPayments');
    let channel = thirdPayments.filter( item => item.payNo == match.params.channel )[0];

    let values = this.state.value;
    if (values.count <= 0) {
      alert('请输入充值金额');
    } else if (values.count < 100) {
      alert('充值金额须大于100元');
    } else if ( isNaN(values.count*1)) {
      alert('汇款金额输入不正确');
    } else if (values.account.length <= 0 ) {
      alert('请输入支付账户');
    } else if (values.nickname.length <= 0) {
      alert('请输入支付昵称');
    } else {
      //money, payType, payNo, time, hkUserName,
      dispatch(saveCompanyThirdPayment(values.count, channel.payType, channel.payNo, values.paydate + ' ' + values.paytime + ':00', values.nickname, (data) => {
        window.alert(data.msg);
        history.goBack();
      }));
    }
  }

  onInputChange(value) {
    this.state.value = Object.assign(this.state.value, value);
  }

  render() {
  
    const {charge, match} = this.props;
    let thirdPayments = charge.get('companyQuickPayments');
    let channel = thirdPayments.filter( item => item.payNo == match.params.channel )[0]
    if (!channel) {
      return null;
    }
    
    let payName = this.payNameLabels[channel.payType];
    options.fields.account.label = payName + '账号';
    options.fields.nickname.label = payName + '昵称';
  

    let bankInfo = <div className="company-info-desc">
      <div className="row">
        <span>{payName}</span>
      </div>
      <div className="row">
        <p>帐号: {channel.payRname}</p>
        <p>昵称: {channel.payNname}</p>
      </div>
    </div>

    return (
      <div className="charge-form company-charge-form form-type2">
        <div className="wrap">
          <div className="thirdpay-info company-info">
            <StickLayout image={ <img src={channel.picUrl} alt=""/> } content={bankInfo}></StickLayout>
          </div>
          <div className="inner company-charge-inner">
            <Form options={options} value={this.state.value} onChange={this.onInputChange} ref="form" type={schema}></Form>
            <div className="btn-wrap">
              <button onClick={this.onFormSubmit} className="btn btn-submit btn-light-blue">提交入款表单</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
};

export default ThirdChargeForm;